<template>
  <div class="wrap1">
    <div class="wrapper">
      <Top :projectId="baojing"></Top>
      <div class="shu-moluai">
        <!-- <div class="sideba">
     
          <div class="right-sidebar">
            <div class="cewen-bar"> 厂区管理 </div>
            <div class="conn-bar" id="style-1">
              <div class="empty" v-if="departList.length == 0">
                暂无部门
              </div>
              <div v-else>
                  <div
                    class="item-conn" v-for="(item, index) in departList" :key="index"
                    :class="index == currentIndex ? 'lie-bg1' : 'lie-bg'"
                    @click="goDepartEquip(index,item.deptId)" 
                  >
                    {{ item.name }}
                  </div>
              </div>
            </div>
            </div>
        </div> -->
        <!-- 左边结束 -->
        <div class="main-dianli-bottomgg" id="style-1">
          <div class="wendutable">
            区所选择:
            <el-select v-model="value" placeholder="请选择" @change="qiehuan">
              <el-option
                v-for="item in departList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <div class="gather-time">采集时间：2024-11-14 20:47:00</div>
          </div>
          <!-- 一组结束 -->
          <!-- <div class="empty" v-if="equipList.length == 0">
            暂无设备信息
          </div> -->
          <div class="main-dianli-kuai" style="padding-top:25px" v-if="valTrue">
            <div
              class="dianli-peidian"
              v-for="(parentsItem, parentsIndex) in equipList"
              :key="parentsIndex"
            >
              <div class="mainbg-tit diyige">
                <div class="biaoti">{{ parentsItem.cabinetName }}</div>
                <div class="xinzengde">
                  <div class="wendu-conmid">
                    <div class="shangcon">
                      <span class="chengsezi"
                        >{{ parentsItem.early_warn_value }}℃</span
                      ><span class="colred">{{ parentsItem.warn_value }}℃</span>
                    </div>
                    <div class="shangcon">
                      <span>预警</span><span>报警</span>
                    </div>
                  </div>
                  <div
                    class=""
                    style="color:#fff; padding-top:3px;padding-left: 10px;"
                  >
                    <span v-if="parentsItem.status == '报警'" class="colred"
                      ><img src="../../../static/image/xiaobj.png"
                    /></span>
                    <span
                      v-else-if="parentsItem.status == '预警'"
                      class="chengsezi"
                      ><img src="../../../static/image/xiaobjcs.png"
                    /></span>
                    <span v-else
                      ><img src="../../../static/image/xiaobjls.png"
                    /></span>
                  </div>
                </div>
              </div>
              <div class="dianli-con" @click="goDetails(parentsItem.cabinetId)">
                <!-- <div class="dianl-tit">温度</div> -->
                <!-- <div class="wendu-conmid">
								<span>预警温度</span><span class="chengsezi">{{parentsItem.early_warn_value}}℃</span><span>报警温度</span><span class="colred">{{parentsItem.warn_value}}℃</span>
							</div> -->
                <div class="jian-ggg" id="style-1">
                  <table>
                    <tr>
                      <th width="25% " class="lansezi">位置</th>
                      <th width="25% " class="chengsezi">A相</th>
                      <th width="25% " class="green">B相</th>
                      <th width="25% " class="red">C相</th>
                    </tr>
                    <tr
                      v-for="(item, index) in parentsItem.points"
                      :key="index"
                    >
                      <td class="lansezi">{{ item.gradation }}</td>
                      <td class="chengsezi">{{ item.A }}</td>
                      <td class="green">{{ item.B }}</td>
                      <td class="red">{{ item.C }}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="main-dlianli-kuai" style="padding-top:25px ;" v-else>
            <div
              class="dianli-peidian"
              v-for="(parentsItem, parentsIndex) in equipList"
              :key="parentsIndex"
            >
              <div class="mainbg-tit diyige">
                <div class="biaoti">{{ parentsItem.cabinetName }}</div>
                <div class="xinzengde">
                  <div class="wendu-conmid">
                    <div class="shangcon">
                      <span class="chengsezi"
                        >{{ parentsItem.early_warn_value }}℃</span
                      ><span class="colred">{{ parentsItem.warn_value }}℃</span>
                    </div>
                    <div class="shangcon">
                      <span>预警</span><span>报警</span>
                    </div>
                  </div>
                  <div
                    class=""
                    style="color:#fff; padding-top:3px;padding-left: 10px;"
                  >
                    <span v-if="parentsItem.status == '报警'" class="colred"
                      ><img src="../../../static/image/xiaobj.png"
                    /></span>
                    <span
                      v-else-if="parentsItem.status == '预警'"
                      class="chengsezi"
                      ><img src="../../../static/image/xiaobjcs.png"
                    /></span>
                    <span v-else
                      ><img src="../../../static/image/xiaobjls.png"
                    /></span>
                  </div>
                </div>
              </div>
              <div class="dianli-con" @click="goDetails(parentsItem.cabinetId)">
                <!-- <div class="dianl-tit">温度</div> -->
                <!-- <div class="wendu-conmid">
								<span>预警温度</span><span class="chengsezi">{{parentsItem.early_warn_value}}℃</span><span>报警温度</span><span class="colred">{{parentsItem.warn_value}}℃</span>
							</div> -->
                <div class="jian-ggg" id="style-1">
                  <table>
                    <tr>
                      <th width="25% " class="lansezi">位置</th>
                      <th width="25% " class="chengsezi">A相</th>
                      <th width="25% " class="green">B相</th>
                      <th width="25% " class="red">C相</th>
                    </tr>
                    <tr
                      v-for="(item, index) in parentsItem.points"
                      :key="index"
                    >
                      <td class="lansezi">{{ item.gradation }}</td>
                      <td class="chengsezi">{{ item.A }}</td>
                      <td class="green">{{ item.B }}</td>
                      <td class="red">{{ item.C }}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- 右边模块一 -->
        </div>

        <!-- 右边结束 -->
      </div>
    </div>
  </div>
</template>
<script>
import Top from "../../components/common/top.vue";
export default {
  components: { Top },
  data() {
    return {
      baojing: 0, //不想
      currentIndex: 0,
      departList: [],
      pId: "",
      equipList: [
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '空气温度',
                        A:17.5, B:20.5, C:11.5,

                    }],

                },
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '空气温度',
                        A: 17.5, B: 20.5, C: 11.5,

                    }],

                },
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '空气温度',
                        A: 17.5, B: 20.5, C: 11.5,

                    }],

                },
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '空气温度',
                        A: 17.5, B: 20.5, C: 11.5,

                    }],

                },
            ],
      valTrue: true,
      value: "冠县",
      options: [],
      deptId: 3
    };
  },
  beforeDestroy() {
    clearInterval(this.tm2);
  },
  created() {
    this.getseletop();
    if (this.$route.query.pId) {
      this.pId = this.$route.query.pId;
    }
    if (this.$route.query.currentIndex) {
      this.currentIndex = this.$route.query.currentIndex;
    }
  },
  mounted() {
    this.roomsfun();
    this.warningfun();
    this.tm2 = setInterval(() => {
      this.warningfun();
    }, 30000);
  },
  methods: {
    getseletop() {
      let userId=this.$auth.get("userid")
      this.$apiv.LoginGetDept({
          id:userId
      }).then(deptRes=>{
          console.log("根据用户id返回dept",deptRes);
          this.departList = deptRes.data;
          this.value=this.departList[0].name
          this.deptId=this.departList[0].id
          this.roomdetailsfun();
      })


      // this.$apiv.setsectlt({}).then(res => {
      //   console.log(res, "选择框");
      //   this.options = res.data;
      //   this.value = res.data[0].name;
      //   this.deptId = res.data[0].deptId;
      //   this.roomdetailsfun();
      // });

    },
    qiehuan(value) {
      console.log(value);
      this.deptId = value;
      this.roomdetailsfun();
      // if (value == '3') {
      //   this.valTrue = false;
      // } else {
      //   this.valTrue = true;
      // }
    },
    warningfun() {
      this.loginLoading = true;
      this.$apiv
        .warning({})
        .then(res => {
          console.log("ggg", res.data);
          if (res.data.is_ok == true) {
            this.baojing = 1;
          } else {
            this.baojing = 0;
          }
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },
    roomsfun() {
      this.loginLoading = true;
      // this.$apiv
      //   .rooms({})
      //   .then(res => {
      //     console.log("roomsfun",res);
      //     this.departList = res.data;
      //     if (res.data.length > 0) {
      //       this.pId = res.data[0].deptId;
      //     }
      //     this.roomdetailsfun();
      //     this.loginLoading = false;
      //   })
      //   .catch(res => {
      //     this.loginLoading = false;
      //   });
      let userId=this.$auth.get("userid")
      this.$apiv.LoginGetDept({
          id:userId
      }).then(deptRes=>{
          console.log("根据用户id返回dept",deptRes);
          this.departList = deptRes.data;
          let data=deptRes.data;
          if (data.length > 0) {
            this.pId = data[0].deptId;
          }
          this.roomdetailsfun();
          this.loginLoading = false;
      }).catch(res => {
        this.loginLoading = false;
      });
    },
    goDepartEquip(index, id) {
      this.currentIndex = index;
      this.pId = id;
      this.roomdetailsfun();
    },
    roomdetailsfun() {
      this.loginLoading = true;
      this.$apiv
        .roomdetails({ deptId: this.deptId })
        .then(res => {
          console.log("roomdetails",res.data);
          // this.equipList = res.data;
          // 后端暂时没有数据故注释
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },
    goDetails(id) {
      this.$router.push({
        path: "/ele_detail",
        query: {
          pId: this.pId,
          cabinetId: id,
          currentIndex: this.currentIndex
        }
      });
    },

  }
};
</script>

<style scoped>
@import url("../../../static/zhuti.css");
.wendutable{
  position: relative;
}
.gather-time{
  display: inline-block;
  float: right;
}
</style>
